<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="plugins/laypage/skin/laypage.css">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="plugins/layui/css/layui.css">
    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="plugins/laypage/laypage.js"></script>
    <script src="plugins/layer/layer.js"></script>
    <link rel="stylesheet" href="plugins/layer/skin/default/layer.css">

</head>
<body>

    <table id="datatable" class="table table-bordered" style="margin-bottom:10px;">
        
        <!--<tbody>-->
		<!--<tr>-->
            <!--<th>#</th>-->
            <!--<th>First Name</th>-->
            <!--<th>Last Name</th>-->
            <!--<th>Username</th>-->
        <!--</tr>-->
        <!--<tr>-->
            <!--<th scope="row">1</th>-->
            <!--<td>Mark</td>-->
            <!--<td>Otto</td>-->
            <!--<td>@mdo</td>-->
        <!--</tr>-->
        <!--<tr>-->
            <!--<th scope="row">2</th>-->
            <!--<td>Jacob</td>-->
            <!--<td>Thornton</td>-->
            <!--<td>@fat</td>-->
        <!--</tr>-->
        <!--<tr>-->
            <!--<th scope="row">3</th>-->
            <!--<td>Larry</td>-->
            <!--<td>the Bird</td>-->
            <!--<td>@twitter</td>-->
        <!--</tr>-->
        <!--</tbody>-->
    </table>

<div><div id="pageview" style="float:left;margin: 10px 0px;margin-left: 10px;">共38条记录,共4页,当前第1页</div><div style="float:right;margin-right: 1px;" id="pageDemo"></div></div>

<script>


        var cols=new Array();
        col1={};
        col1.name ="人物";
        col1.field="person";
        col1.width="100";
        col1.render="rd";
        cols.push(col1);
        col2={};
        col2.name ="民族";
        col2.field="nation";
        col2.width="100";
        col2.render="rd1";
        cols.push(col2);
        col3={};
        col3.name ="备注";
        col3.field="detail";
        col3.width="200";
        col3.render="rd2";
        cols.push(col3);

        var rows=new Array();
        row1={};
        row1.person="岳飞";
        row1.nation="汉";
        row1.detail="是个好人，是个英雄！";
        rows.push(row1);
        row2={};
        row2.person="韩信";
        row2.nation="汉";
        row2.detail="是个好人，是个英雄！";
        rows.push(row2);

        var htrdom=$("<tr></tr>");
        var checkalldom=$("<input type='checkbox'>").bind("change",function(){
            $(this).parents('tr').siblings().find('input.rowcheck').prop("checked",$(this).is(':checked'));
        });
        $("<th></th>").css({"width":"50px","text-align":"center"}).append(checkalldom).appendTo(htrdom)
        cols.forEach(function(value, index, array) {
            $("<th></th>").html(value.name).appendTo(htrdom);
        });

        var tbodydom=$("<tbody></tbody>").append(htrdom);
        rows.forEach(function (row,index,array) {
            var tbodytrdom=$("<tr></tr>")
            tbodytrdom.data("rowdata",row);
            $("<td></td>").css({"width":"50px","text-align":"center"}).append("<input type='checkbox' class='minimal rowcheck'>").appendTo(tbodytrdom);
            cols.forEach(function(col, index, array) {
                $("<td></td>").html(row[col.field]).appendTo(tbodytrdom);
            });
            tbodydom.append(tbodytrdom);
        })
        $("#datatable").append(tbodydom);

        //全选
//        form.on('checkbox(allChoose)', function(data){
//            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
//            child.each(function(index, item){
//                item.checked = data.elem.checked;
//            });
//            form.render('checkbox');
//        });
        //分页
        laypage({
            cont: 'pageDemo', //分页容器的id
            pages: 11, //总页数
			skip: true,
		    first: 1, //将首页显示为数字1,。若不显示，设置false即可
		    last: 11, //将尾页显示为总页数。若不显示，设置false即可
		    prev: '<', //若不显示，设置false即可
		    next: '>' //若不显示，设置false即可
            ,jump: function(obj, first){
				$("#pageview").html("共38条记录,共"+obj.curr+"页,当前第"+obj.pages+"页");
                if(!first){
//                    layer.msg('第'+ obj.curr +'页');
                    layer.msg(JSON.stringify($("tr").eq(1).data("rowdata")));
                }

            }
        });
    function checkall() {
        alert($(this).is(':checked'));
//        $(this).parents('tr').siblings().find('input.rowcheck').prop("checked",$(this).is(':checked'));
    }
</script>
</body>
</html>